<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">	
	<title>Document</title>
	<style>
		*{
			padding: 0;
			margin: 0
		}
		html,body{
			width: 100%;
			height: 100%;
		}
		.modalWrap{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			width: 100%;
			height: 100%;	
			background: rgba(0,0,0,0.7);
			overflow:hidden;
		}
		.modal{
			border-radius: 15px;
			overflow:hidden;
			background: #fff;
            width: 80%;
		}
		.modalHead,.modalHead>img{
			width: 100%;	
		}
		.modalBody{
			overflow-y: scroll;
			height: 200px;
			padding: 20px;
			padding-top: 0px;
		}
		.modalBody>p{
			padding: 5px;
		}
		.modalFoot{
			display: flex;
		}
		.modalFoot div{
			width: 50%;
			padding: 10px;
			text-align: center;
			color: #ffd300;
			border:1px solid #ffd300;
		}
	</style>
</head>
<body>
	<div class="modalWrap">
		<div class="modal">
			<div class="modalHead">
				<img src="https://ws1.sinaimg.cn/large/0065nu1aly1fuwjhusqbzj30k0064my6.jpg"/>
			</div>
			<div class="modalBody">
				<p>1.阿斯顿阿斯达啊</p>
				<p>2.阿斯达大阿斯大阿迪趣额</p>
				<p>3.阿斯达大阿斯asda阿迪趣味额</p>
				<p>4.阿斯达大阿斯大迪阿迪趣味额</p>
				<p>5.阿斯达大阿斯大迪阿迪趣味额</p>
				<p>6.阿斯达大阿斯大时代趣味额</p>
			</div>
			<div class="modalFoot">
				<div>稍后再说</div>
				<div>立即更新</div>
			</div>
		</div>
	</div>
</body>
</html>